// import React, { FC } from "react";

// interface AaaProps {
//   children: React.ReactNode;
//   // children: React.ReactNode[];
// }

// const Aaa: FC<AaaProps> = (props) => {
//   const { children } = props;

//   return (
//     <div className="container">
//       {React.Children.map(children, (item) => {
//         {
//           /*{children.map((item) => {*/
//         }
//         return <div className="item">{item}</div>;
//       })}
//     </div>
//   );
// };

// function App() {
//   return (
//     <Aaa>
//       {[
//         <span>111</span>,
//         <span>333</span>,
//         [<span>444</span>, <span>222</span>],
//       ]}
//     </Aaa>
//   );
// }

// export default App;
//==================
// import React, { FC } from "react";

// interface AaaProps {
//   children: React.ReactNode;
// }

// const Aaa: FC<AaaProps> = (props) => {
//   const { children } = props;

//   const arr = React.Children.toArray(children);

//   console.log(arr.sort());

//   return <div className="container"></div>;
// };

// function App() {
//   return (
//     <Aaa>
//       {33}
//       <span>hello world</span>
//       {22}
//       {11}
//     </Aaa>
//   );
// }

// export default App;

//==================
// import React, { FC } from "react";

// interface RowListProps {
//   children?: React.ReactNode;
// }

// const RowList: FC<RowListProps> = (props) => {
//   const { children } = props;

//   return (
//     <div className="row-list">
//       {React.Children.map(children, (item) => {
//         return <div className="row">{item}</div>;
//       })}
//     </div>
//   );
// };

// function App() {
//   return (
//     <RowList>
//       <div>111</div>
//       <div>222</div>
//       <div>333</div>
//     </RowList>
//   );
// }
// export default App;

//===================
// import React, { FC } from "react";

// interface RowProps {
//   children?: React.ReactNode;
// }

// const Row: FC<RowProps> = (props) => {
//   const { children } = props;
//   return <div className="row">{children}</div>;
// };

// interface RowListProps {
//   children?: React.ReactNode;
// }

// const RowList: FC<RowListProps> = (props) => {
//   const { children } = props;

//   return <div className="row-list">{children}</div>;
// };

// function App() {
//   return (
//     <RowList>
//       <Row>
//         <div>111</div>
//       </Row>
//       <Row>
//         <div>222</div>
//       </Row>
//       <Row>
//         <div>333</div>
//       </Row>
//     </RowList>
//   );
// }

// export default App;
//===================
// import React, { FC, PropsWithChildren } from "react";

// const Row: FC<PropsWithChildren> = (props) => {
//   const { children } = props;
//   return <div className="row">{children}</div>;
// };

// const RowList: FC<PropsWithChildren> = (props) => {
//   const { children } = props;

//   return <div className="row-list">{children}</div>;
// };

// function App() {
//   return (
//     <RowList>
//       <Row>
//         <div>111</div>
//       </Row>
//       <Row>
//         <div>222</div>
//       </Row>
//       <Row>
//         <div>333</div>
//       </Row>
//     </RowList>
//   );
// }

// export default App;
//=================================
// import { FC, PropsWithChildren, ReactNode } from 'react';

// interface RowListProps extends PropsWithChildren {
//   items: Array<{
//     id: number,
//     content: ReactNode
//   }>
// }

// const RowList: FC<RowListProps> = (props) => {
//   const { items } = props;

//   return <div className='row-list'>
//       {
//         items.map(item => {
//           return  <div className='row' key={item.id}>{item.content}</div>
//         })
//       }
//   </div>
// }

// function App() {
//   return <RowList items={[
//     {
//       id: 1,
//       content: <div>111</div>
//     },
//     {
//       id: 2,
//       content: <div>222</div>
//     },
//     {
//       id: 3,
//       content: <div>333</div>
//     }
//   ]}>
//   </RowList>
// }

// export default App;

//=========================
import { FC, PropsWithChildren, ReactNode } from "react";

interface Item {
  id: number;
  content: ReactNode;
}

interface RowListProps extends PropsWithChildren {
  items: Array<Item>;
  renderItem: (item: Item) => ReactNode;
}

const RowList: FC<RowListProps> = (props) => {
  const { items, renderItem } = props;

  return (
    <div className="row-list">
      {items.map((item) => {
        return renderItem(item);
      })}
    </div>
  );
};

function App() {
  return (
    <RowList
      items={[
        {
          id: 1,
          content: <div>111</div>,
        },
        {
          id: 2,
          content: <div>222</div>,
        },
        {
          id: 3,
          content: <div>333</div>,
        },
      ]}
      renderItem={(item) => {
        return (
          <div className="row" key={item.id}>
            <div className="box">{item.content}</div>
          </div>
        );
      }}
    ></RowList>
  );
}

export default App;
